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Question 1 [20 marks] 


a) Describe the key differences between the WebSockets and Server-Sent Events protocols, in 
terms of: 


i. Whether they are unidirectional or bi-directional [2 marks] 
ii. Their behaviour if the connection is lost [3 marks] 


ili. The request and response headers that establish a WebSockets or Server-Sent Events 
connection [6 marks] 


iv. How messages are formatted once the connection has been established [4 marks] 
b) Give an example of the client-side code that would establish a WebSocket connection, parse 


any received messages as JSON data, and accumulate them in an array. (You may write your 
example in JavaScript, CoffeeScript, or TypeScript). [5 marks] 


Question 2 [25 marks] 
a) Briefly explain the following Web security threats: 
i. Cross-site scripting [5 marks] 
ii. SQL injection attacks [5 marks] 
iii. Session hijacking [5 marks] 
b) Describe two parameters that can be set on a Set-Cookie response header value to enhance the 
cookie’s security. For each parameter, explain how it improves the cookie’s security. 
[5 marks] 
c) Aserver makes a POST request to an API returning JSON data from a different server than the 
Origin. What sequence of HTTP requests, and which response headers for Cross-Origin 


Resource Sharing (CORS), are required for a modern browser to perform this request and 
provide access to the JSON response from the JavaScript code? [5 marks] 
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Question 3 [45 marks] 


You are part of a team designing a smart chat platform for schools. Every user connects to the same 
chatroom, and when they post messages they appear in real-time on their classmates’ screens. The 
teacher can also push multiple choice questions into the stream. These appear in each students’ chat 
screen as a message with four voting buttons. The results appear in real-time only on the teacher’s 
screen. 


A form allows any user to create a chat room; the user creating the chat room is assumed to be the 
teacher. They are then taken to the chat room, with the first message being a unique unguessable link 
that they can give to their students to join the room. 


In case students post rude messages, each message has a “delete” button on the teacher’s screen and a 
“report” button on the students’ screens. If the teacher presses “delete”, this will delete the message 
from the students’ screens. If a student presses “report”, this will post a message into the teacher’s 
screen stating that they reported it, and containing a link to scroll down to the reported message (to 
decide whether to delete it). 


a) Design the path structure for your application. For each request path, describe the method, 
path, any URL or query parameters, and what the purpose of that request path would be. 


For example: 
GET /new 
returns an HTML form for creating a new chat room 


Ensure you include the paths that produce the page, and any WebSocket or Server-Sent Events 
connections in your answer. [10 marks] 


b) Design the JSON message structure for your application. For each path that would send or 
receive JSON data, describe with an example what the JSON message format would be. 
[10 marks] 


c) The chat screen of your app will be a Single Page App (SPA) using React.js, Angular.js, or 
d3.js (You may answer this question using any of these frameworks.) 


Identify the main view components (for example, React.js components) you will need to create 
in order to implement this app. For each component, give it a name, describe what data it acts 
upon, and an example of the template code. (Your syntax need not be precise, but the code 
must be intelligible.) [15 marks] 


d) The code for your SPA is written in several TypeScript files, and yet is delivered to the 
browser as a single JavaScript file. What stages of processing would your code have been 
processed through for this to be possible? [5 marks] 


e) When you open the browser’s developer tools to debug your program, it allows you to step 
through the TypeScript source code even though the browser cannot interpret TypeScript. How 
is this possible? Include in your answer any additional resources (files) the browser would 
have needed, and what produces them. [5 marks] 
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Question 4 [20 marks] 


a) Briefly compare Canvas, SVG, and WebGL. Include in your answer what each is useful for 


and the concepts behind them. [10 marks] 


b) Suppose you are writing animation that shows text “raining” down the screen as in the image 


below. Outline the approach you would take to implement this using WebGL. You may 
include code snippets to help explain your approach, but are not required to. [10 marks] 
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